<template>
  <view>
    <view
      class=""
      @click="go()"
      style="width: 100%; height: 100vh; position: fixed; z-index: 100"
    >
      <view class="fx"> APP内打开 </view>
    </view>
    <!-- 顶部自定义导航栏 -->
    <view class="customNavBar" v-if="false">
      <!-- <view class="leftBackHeader">
        <view class="backImg" @click="goBack">
          <image
            src="/static/activity/fanhui btn@2x.png"
            mode="aspectFill"
          ></image>
        </view>
        <view class="infoBox" @click="goAuthor">
          <image :src="author.userPic" mode="aspectFill"></image>
          <text>{{ author.nickname }}</text>
        </view>
      </view> -->
      <view class="rightShare">
        <view
          v-show="author.isFollow"
          @click="cancelfollowAuthor"
          type="default"
          class="actguanzhuBox"
        >
          取消关注
        </view>
        <view
          v-show="!author.isFollow && author.isFollowMe"
          @click="followAuthor"
          type="default"
          class="guanzhuBox"
        >
          回关
        </view>
        <view
          v-show="!author.isFollow && !author.isFollowMe"
          @click="followAuthor"
          type="default"
          class="guanzhuBox"
        >
          关注
        </view>

        <view class="shareImg" @click="share()">
          <image src="/static/activity/share.png" mode="aspectFill"></image>
        </view>
      </view>
    </view>
    <!-- 页面主要内容 -->
    <view class="mainBox">
      <view class="bodyBox">
        <view class="operationImg">
          <!-- 轮播图 -->
          <view class="swiper-container">
            <swiper
              class="swiper"
              :indicator-dots="false"
              @change="onSwiperChange"
              :style="{ height: swiperHeight + 'px' }"
            >
              <swiper-item v-for="(item, index) in swiperItems2" :key="index">
                <view class="swiper-item-container">
                  <image
                    :id="'swiperImg' + index"
                    class="swiper-image"
                    :src="item.img"
                    mode="widthFix"
                    @load="onImageLoad(index)"
                  ></image>
                </view>
              </swiper-item>
            </swiper>
          </view>
          <!-- 自定义指示点 -->
          <view class="indicator-container">
            <view
              v-for="(item, index) in swiperList"
              :key="index"
              class="indicator"
              @click="changeSlide(index)"
            >
              <image
                :src="index === activeIndex ? activeImg : inactiveImg"
                mode="aspectFit"
                class="indicator-image"
              >
              </image>
            </view>
          </view>
        </view>
        <view class="operationText">
          <view class="title">
            {{ note.noteTitle }}
          </view>
          <view class="text">{{ note.noteContent }}</view>
          <!-- 打赏图标 -->
          <view class="rewardImg" @click="rewardOperate">
            <image
              src="/static/main/dashang@2x (1).png"
              mode="aspectFit"
            ></image>
            <view class="rewardText">打赏作者</view>
          </view>
          <view class="tagListBox">
            <text class="tagItem" v-for="(item, index) in tagList" :key="index">
              {{ item.name }}
            </text>
          </view>
          <view class="searchBox" @click="goSearch()">
            <image
              src="/static/search/sousuoicon@2x.png"
              mode="aspectFit"
            ></image>
            <input type="text" :placeholder="tagList[0].name" />
          </view>
          <view class="Tips"> 04-23 ·{{ note.ipRealAddress }} </view>
        </view>
      </view>
      <!-- 评论区 -->
      <view class="commentBox">
        <view class="comTitle"> 评论（{{ totalCount }}） </view>
        <view class="comLine"></view>
        <gui-empty v-if="replys.length == 0" style="height: 200rpx">
          <template v-slot:img>
            <view class="gui-flex gui-rows gui-justify-content-center">
              <text
                class="gui-icons gui-empty-icon gui-color-gray"
                style="font-size: 40rpx"
                >&#xe6b8;</text
              >
            </view>
          </template>
          <template v-slot:text>
            <text
              class="gui-block gui-text-center gui-margin-top gui-color-gray"
              >还没有评论哦~</text
            >
          </template>
        </gui-empty>

        <!-- 留言 -->
        <view
          style="margin-top: 30rpx"
          class="gui-flex gui-row gui-nowrap gui-bg-white gui-space-between"
          v-for="(item, index) in replys"
          :key="index"
        >
          <image
            @tap="goCard(item.authorId)"
            style="width: 65rpx; height: 65rpx"
            :src="item.avatarUrl"
            class="gui-comments-face"
          ></image>
          <view
            :ref="item.replyId"
            :class="[domId == item.replyId ? 'reply-checked' : '']"
            style="width: 610rpx"
            class="gui-comments-body"
          >
            <view
              class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center"
              style="position: relative"
            >
              <text
                @tap="goCard(item.authorId)"
                class="gui-comments-header-text gui-text"
                style="color: #acacac; font-size: 26rpx"
                >{{ item.authorName }}

                <text
                  style="
                    font-size: 22rpx !important;
                    background: #ffeceb !important;
                    color: #fa5f5a;
                    border-radius: 20rpx;
                    width: 90rpx;
                    padding: 5rpx 10rpx;
                    text-align: center;
                  "
                  v-show="item.authorId == note.authorId"
                >
                  作者
                </text>
              </text>

              <view
                @tap="upReply(item)"
                style="
                  position: absolute;
                  right: 0;
                  top: 40rpx;
                  width: 50rpx;
                  font-size: 24rpx;
                  text-align: center;
                "
              >
                <text
                  style="width: 50rpx; text-align: center"
                  :class="[
                    'gui-comments-header-text',
                    'gui-icons',
                    'xhs-font28',
                    item.isUp ? 'zan-active xhs-font35' : 'gui-color-gray',
                  ]"
                  >{{ item.isUp ? "&#xe605;" : "&#xe6ad;" }}
                </text>

                <view class="gui-color-gray" v-show="item.upCount > 0"
                  >{{ item.upCount }}
                </view>
              </view>
            </view>
            <text
              class="gui-block"
              style="width: 80%; font-size: 26rpx; margin-top: 8rpx"
              >{{ item.replayContent }}</text
            >
            <view
              style="margin-top: 8rpx"
              class="gui-comments-imgs gui-flex gui-rows gui-wrap"
              v-if="item.imgs"
            >
              <view @click.stop="showImgs(index, 0)">
                <gui-image :src="item.imgs[0]" borderRadius="10rpx"></gui-image>
              </view>
            </view>
            <view
              class="gui-color-gray"
              style="font-size: 24rpx; margin-top: 8rpx"
            >
              <text
                >{{ formatDate(item.createTime) }}
                {{ item.ipRealAddress }}</text
              >
              <text
                style="color: #5a5a5a; margin-left: 10rpx"
                @tap="openComment(item.replyId)"
                >回复</text
              >
            </view>
            <view
              class="xhs-gray-color"
              style="
                font-size: 24rpx;
                margin-top: 8rpx;
                background: #f8f8f8 !important;
                border-radius: 20rpx;
                width: 80rpx;
                padding: 5rpx;
                text-align: center;
              "
              v-show="item.firstReplay == 1"
            >
              首评
            </view>

            <view v-if="item.reply">
              <view
                style="margin-top: 20rpx; position: relative"
                class="gui-flex gui-row gui-align-items-start"
                v-for="(itemRe, indexRe) in item.reply"
                :key="indexRe"
                :ref="itemRe.replyId"
                :class="[domId == itemRe.replyId ? 'reply-checked' : '']"
              >
                <view>
                  <image
                    @tap="goCard(itemRe.authorId)"
                    style="width: 40rpx; height: 40rpx"
                    class="gui-list-image ucenter-face-image"
                    :src="itemRe.avatarUrl"
                    mode="aspectFill"
                  ></image>
                </view>
                <view style="margin-left: 10rpx">
                  <view
                    @tap="goCard(itemRe.authorId)"
                    style="height: 20rpx; color: #acacac; font-size: 26rpx"
                    >{{ itemRe.authorName }}
                    <text
                      style="
                        font-size: 22rpx !important;
                        background: #ffeceb !important;
                        color: #fa5f5a;
                        border-radius: 20rpx;
                        width: 90rpx;
                        padding: 5rpx 10rpx;
                        text-align: center;
                      "
                      v-show="itemRe.authorId == note.authorId"
                    >
                      作者
                    </text>
                  </view>

                  <view style="margin-top: 20rpx">
                    <text
                      class="gui-block"
                      style="font-size: 26rpx; margin-top: 8rpx"
                    >
                      <text v-show="itemRe.parentAuthorName">回复</text
                      ><text
                        style="height: 20rpx; color: #acacac; font-size: 26rpx"
                        v-show="itemRe.parentAuthorName"
                        @tap="goCard(itemRe.authorId)"
                        >: {{ itemRe.parentAuthorName }}</text
                      >
                      {{ itemRe.replayContent }}
                    </text>
                  </view>

                  <view
                    class="gui-color-gray"
                    style="font-size: 24rpx; margin-top: 8rpx"
                  >
                    <text
                      >{{ formatDate(itemRe.createTime) }}
                      {{ itemRe.ipRealAddress }}</text
                    >
                    <text
                      style="color: #5a5a5a; margin-left: 10rpx"
                      @tap="openComment(item.replyId, itemRe.replyId)"
                      >回复</text
                    >
                  </view>
                </view>

                <view
                  @tap="upReply(itemRe)"
                  style="
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 50rpx;
                    font-size: 24rpx;
                    text-align: center;
                  "
                >
                  <text
                    style="width: 50rpx; text-align: center"
                    :class="[
                      'gui-comments-header-text',
                      'gui-icons',
                      'xhs-font28',
                      itemRe.isUp ? 'zan-active xhs-font35' : 'gui-color-gray',
                    ]"
                    >{{ itemRe.isUp ? "&#xe605;" : "&#xe6ad;" }}
                  </text>
                  <view class="gui-color-gray" v-show="itemRe.upCount > 0">{{
                    itemRe.upCount
                  }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 评论组件 -->
      <gui-submit-comment
        :focus="true"
        :placeholder="'爱评论的人运气都不差'"
        ref="guisubmitcomment"
        :isImg="true"
        @submit="submit"
        @close="close"
      ></gui-submit-comment>
    </view>

    <!-- 自定义页面底部导航栏 -->
    <view class="operationBtn">
      <view class="leftBtn">
        <view class="dis" @click="upNote(note)">
          <image
            v-if="!note.isUp"
            src="/static/activity/zan.png"
            mode="aspectFit"
          ></image>
          <image v-else src="/static/main/dianzan@2x (1).png" mode=""></image>
          <text>{{ note.upCount }}</text>
        </view>
        <view class="dis" @click="openComment()">
          <image src="/static/activity/pinglun.png" mode="aspectFit"></image>
          <text>{{ totalCount }}</text>
        </view>
        <view class="dis" @click="starNote(note)">
          <image
            v-if="!note.isStar"
            src="/static/activity/shoucang.png"
            mode="aspectFit"
          ></image>
          <image v-else src="/static/main/shoucang@2x.png" mode=""></image>
          <text>{{ note.starCount }}</text>
        </view>
        <view class="dis">
          <image src="/static/main/dashang@2x.png" mode="aspectFit"></image>
          <text>585</text>
        </view>
      </view>
      <view class="rightBtn" @tap="openComment()">
        <image src="/static/activity/liuyan.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="mask" v-if="isPopupVisible" @click="closePopup"></view>

    <!-- 打赏弹窗 -->
    <view class="popup" v-if="isPopupVisible">
      <view class="popup-content">
        <view class="popupTop">
          <view class="popupBtn"> </view>
          <view class="popupText"> 打赏 </view>
        </view>
        <view class="popupContent">
          <view
            class="popupContentItem"
            @click="openPayPopup(item)"
            v-for="(item, index) in giftsList"
            :key="index"
          >
            <image src="/static/main/dashang1@2x.png" mode="aspectFit"></image>
            <text>￥{{ item.giftPrice }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 报名弹窗 -->
    <view class="success-mask" v-if="showSuccessMask">
      <view class="success-popup"> 关注成功 </view>
    </view>

    <!-- 支付方式选择弹窗 -->
    <PaySelectPopup
      :show="isPayPopupVisible"
      :defaultMethod="selectedPayMethod"
      @close="closePayPopup"
      @confirm="onPayMethodConfirm"
    />
    <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
      <view class="list">
        <view class="tit"> 请选择收藏夹 </view>
        <scroll-view
          style="height: 460rpx"
          @scrolltolower="scM"
          scroll-y="true"
          class="scroll-Y"
        >
          <view
            class="list-msg"
            v-for="(item, index) in scList"
            @click="scSubmit(item)"
          >
            {{ item.folderTitle }}收藏夹
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import PaySelectPopup from "@/components/PaySelectPopup.vue";
import commonMixin from "@/mixin/commonMinxin";
export default {
  mixins: [commonMixin],
  components: {
    PaySelectPopup,
  },
  data() {
    return {
      starNoteData: {},
      offset: 1,
      scList: [
        {
          folderTitle: "普通",
          starFolderId: null,
        },
      ],
      imgIndex: 0,
      swiperItems2: [],
      note: {},
      timer: null,
      swiperHeight: 500, // 默认高度，会被动态计算覆盖
      loadedImages: {}, // 记录已加载的图片
      // 模拟评论数据 (实际项目来自api请求)
      replys: [],
      totalCount: 0,
      buttonShow: true,
      domId: "",
      noteId: null,
      user: uni.app.getStorage("user"),
      author: {},
      activeImg: "/static/activity/lunbo icon1@2x.png",
      inactiveImg: "/static/activity/lunbo icon4@2x.png",
      activeIndex: 0,
      swiperList: [],
      tagList: [
        {
          name: "#上海宠物活动",
          id: 1,
        },
        {
          name: "#同城宠物交友",
          id: 2,
        },
        {
          name: "#宠物交友活动",
          id: 3,
        },
      ],
      commentList: [],
      isPopupVisible: false, // 控制弹窗的显示状态
      showSuccessMask: false,
      guanzhuStatus: 1, //关注按钮状态 1  关注  2  已关注
      isShowZan: true, //展示是否点赞
      isShowShoucang: true,
      isPayPopupVisible: false,
      selectedPayMethod: "4",
      orderItem: {},
      giftsList: [],
    };
  },
  mounted() {
    if (!uni.app.isEmpty(this.domId)) {
      this.$nextTick(() => {
        setTimeout(() => {
          uni.pageScrollTo({
            scrollTop: this.$refs[this.domId][0].$el.offsetTop,
            duration: 200,
          });
        }, 200);
      });
    }
  },
  onLoad(options) {
    console.log(options);
    this.noteId = options.noteId;
    // let checkLogin = uni.app.checkLogin();
    this.getNoteDetail(options.noteId);
    this.getNoteReply(options.noteId);
    this.getGifts();
    this.scInit();
    this.domId = options.domId;
  },
  methods: {
    go() {
      uni.showModal({
        title: "提示",
        content: "即将离开页面打开app",
        success: function (res) {
          if (res.confirm) {
            window.location.href = "https://www.baidu.com";
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    scSubmit(item) {
      console.log(item.starFolderId, "it");
      let notes = this.starNoteData;

      notes = {
        ...notes,
        ...{
          starFolderId: item.starFolderId,
          followId: uni.getStorageSync("userId"),
        },
      };
      console.log(notes, "notes");
      uni.app.post("/blog/action/starNote", notes, "json", "", (res) => {
        this.getNoteDetail();
        this.$refs.popup.close();
      });
    },
    scM() {
      console.log("出的file");
      this.offset++;
      this.scInit();
    },
    scInit() {
      uni.app.post(
        "/blog/note/getStarFolder",
        {
          authorId: uni.getStorageSync("userId"),
          limit: 10,
          offset: this.offset,
        },
        "",
        "",
        (res) => {
          this.scList = this.scList.concat(res.data.records);
        },
      );
    },
    changeSlide(index) {
      this.activeIndex = index;
    },
    onSwiperChange(e) {
      this.activeIndex = e.detail.current;
      this.$nextTick(() => {
        this.calculateSwiperHeight(e.detail.current); // 动态设置 swiper 的高度
      });
    },

    // 动态设置 swiper 的高度
    setSwiperHeight() {
      const element = "#swiperImg" + this.activeIndex;
      const query = uni.createSelectorQuery().in(this);
      query.select(element).boundingClientRect();
      query.exec((res) => {
        if (res && res[0]) {
          this.swiperHeight = res[0].height;
        }
      });
    },

    // 图片加载完成时触发
    onImageLoad(index) {
      if (index === this.activeIndex) {
        this.calculateSwiperHeight(index);
      }
    },

    // 根据图片比例计算swiper高度
    calculateSwiperHeight(index) {
      if (this.loadedImages[index]) {
        // 使用预加载获取的图片比例
        const containerWidth = uni.getSystemInfoSync().windowWidth;
        // 将rpx转换为px (假设设计稿是750rpx宽度)
        const rpxRatio = 750 / containerWidth;
        const paddingPx = (28 * 2) / rpxRatio; // 两侧padding转为px

        const imageWidth = containerWidth - paddingPx;
        const imageHeight = imageWidth * this.loadedImages[index].aspectRatio;

        // 添加额外的空间以确保图片完全显示（顶部和底部各增加10px）
        this.swiperHeight = imageHeight + 20;
      } else {
        // 如果没有预加载数据，回退到DOM方式
        const element = "#swiperImg" + index;
        const query = uni.createSelectorQuery().in(this);
        query.select(element).boundingClientRect();
        query.exec((res) => {
          if (res && res[0]) {
            // 添加额外的空间以确保图片完全显示
            this.swiperHeight = res[0].height + 20;
          }
        });
      }
    },
    goBack() {
      uni.navigateBack({
        delta: 1, // 返回的页面数，如果delta大于现有页面数，则返回到首页。
      });
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          window.AndroidBridge.backEvent();

          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.backEvent.postMessage({});
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
      // window.webkit.messageHandlers.backEvent.postMessage({});
    },
    // 点击打赏
    rewardOperate() {
      this.isPopupVisible = true;
    },
    closePopup() {
      this.isPopupVisible = false; // 隐藏弹窗
    },
    gotoGuanzhu() {
      this.showSuccessMask = true;
      this.guanzhuStatus = 2;
      // 3秒后自动关闭
      setTimeout(() => {
        this.showSuccessMask = false;
      }, 2000);
    },
    getGifts() {
      uni.app.post(
        "/blog/reward/list",
        {
          userId: uni.getStorageSync("userId"),
          limit: 100,
          offset: 1,
        },
        "",
        "",
        (res) => {
          this.giftsList = res.data.rows;
        },
      );
    },
    showZan() {
      this.isShowZan = !this.isShowZan;
    },
    showShoucang() {
      this.isShowShoucang = !this.isShowShoucang;
    },
    goSearch() {
      uni.navigateTo({
        url: "/pages/search/search?type=1",
      });
    },
    parserHtml(data) {
      return parserHtml.parserHTML(data);
    },
    getAuthor() {
      uni.app.post(
        "/blog/author/getAuthor",
        {
          authorId: uni.getStorageSync("userId"),
          followAuthorId: this.note.authorId,
        },
        "",
        "",
        (res) => {
          console.log(res);
          this.author = res.data;
        },
      );
    },
    goAuthor() {
      uni.navigateTo({
        url: `/pages/card/card?authorId=${this.author.userId}`,
      });
    },
    editNote() {
      uni.app.navigate(
        "/pages/editNote/editNote?noteId=" + this.note.noteId,
        "redirectTo",
      );
    },
    goCard(authorId) {
      return uni.app.goCard(authorId);
    },
    formatDate(date) {
      return uni.app.formatDate(date);
    },
    cancelfollowAuthor() {
      uni.app.post(
        "/blog/action/cancelFollowAuthor",
        {
          followAuthorId: uni.getStorageSync("userId"),
          authorId: this.author.userId,
        },
        "json",
        "",
        (res) => {
          this.getAuthor();
        },
      );
    },
    followAuthor() {
      uni.app.post(
        "/blog/action/followAuthor",
        {
          followAuthorId: uni.getStorageSync("userId"),
          authorId: this.author.userId,
        },
        "json",
        "",
        (res) => {
          this.getAuthor();
        },
      );
    },
    upReply(reply) {
      reply = {
        ...reply,
        ...{
          followId: uni.getStorageSync("userId"),
        },
      };
      uni.app.post("/blog/action/upReply", reply, "json", "", (res) => {
        console.log(res.data);
        if (res.code == 2000) {
          reply.isUp = true;
          reply.upCount++;
        } else {
          reply.isUp = false;
          reply.upCount--;
        }
      });
    },
    //点赞笔记
    upNote(notes) {
      notes.noteId = parseInt(notes.noteId);
      notes = {
        ...notes,
        ...{
          followId: uni.getStorageSync("userId"),
        },
      };
      let data = {
        authorId: notes.authorId,
        authorName: notes.authorName,
        followId: uni.getStorageSync("userId"),
        noteId: notes.noteId,
        noteTitle: notes.noteTitle,
      };
      uni.app.post("/blog/action/upNote", data, "json", "", (res) => {
        // this.note.isUp=!this.note.isUp
        this.getNoteDetail();
        return;
        if (res.code == 2000) {
          this.note.isUp = true;
          this.note.upCount++;
        } else {
          this.note.isUp = false;
          this.note.upCount--;
        }
      });
    },
    starNote(notes) {
      this.starNoteData = notes;
      notes = {
        ...notes,
        ...{
          followId: uni.getStorageSync("userId"),
        },
      };
      if (this.note.isStar == true) {
        uni.app.post("/blog/action/starNote", notes, "json", "", (res) => {
          this.getNoteDetail();
          this.$refs.popup.close();
        });
      } else {
        this.$refs.popup.open();
      }

      return;
    },
    share() {
      let ddd = {
        id: this.note.noteId,
        url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/notes/detail/detail?noteId=${this.note.noteId}`,
      };
      let d = JSON.stringify(ddd);
      console.log(d, "都是对的");
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = {
            id: this.note.noteId,
            url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/notes/detail/detail?noteId=${this.note.noteId}`,
          };
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.shareEvent(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.shareEvent.postMessage({
            id: this.note.noteId,
            url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/notes/detail/detail?noteId=${this.note.noteId}`,
          });
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
      return;
      console.log("分享");
      uni.navigateTo({
        url: "/pages/notes/shareArticle/shareArticle",
      });
    },
    showImgs: function (commentsIndex, imgIndex) {
      console.log(commentsIndex, imgIndex);
      uni.previewImage({
        urls: this.commentContents[commentsIndex].imgs,
        current: this.commentContents[commentsIndex].imgs[imgIndex],
      });
    },
    swiperchange: function (e) {
      console.log(e);
    },
    setTimer() {
      if (this.timer != null) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        clearTimeout(this.timer);
        this.timer = null;
      }, 3000);
    },
    taped: function (e) {
      this.imgIndex = e;
      //当图片发生切换时显示tips三秒后关闭
      this.setTimer();
    },
    getNoteDetail(noteId) {
      console.log(noteId, "noteId");
      uni.app.post(
        "/blog/home/getNote",
        {
          noteId: this.noteId,
          authorId: uni.getStorageSync("userId"),
          keyword: "",
        },
        "",
        "",
        (res) => {
          console.log(res);
          this.note = res.data;
          // this.note.noteContent = this.parserHtml(this.note.noteContent)
          this.getAuthor();
          console.log(this.note);
          if (this.note.imgList) {
            // 预加载图片
            const preloadPromises = this.note.imgList.map((imgUrl, index) => {
              return new Promise((resolve) => {
                const img = new Image();
                img.src = imgUrl;
                img.onload = () => {
                  this.loadedImages[index] = {
                    width: img.width,
                    height: img.height,
                    aspectRatio: img.height / img.width,
                  };
                  resolve();
                };
                img.onerror = () => resolve(); // 即使加载失败也继续
              });
            });

            // 等待所有图片预加载完成
            Promise.all(preloadPromises).then(() => {
              // 加载完成后再添加到轮播图
              for (let i of this.note.imgList) {
                this.swiperItems2.push({
                  img: i,
                  url: "",
                  title: "",
                  opentype: "click",
                });
              }

              // 立即计算第一张图片的高度
              this.$nextTick(() => {
                this.calculateSwiperHeight(0);
              });
            });
          }
          //请求成功后再弹tips
          this.setTimer();
        },
      );
    },
    getNoteReply(noteId) {
      uni.app.post(
        "/blog/note/getNoteReply",
        {
          noteId: noteId,
          keyword: "",
          authorId: uni.getStorageSync("userId"),
          followId: uni.getStorageSync("userId"),
        },
        "",
        "",
        (res) => {
          console.log(res.data);
          this.replys = res.data.replys;
          this.totalCount = res.data.totalCount;
        },
      );
    },
    // 打开提窗口
    openComment: function (topParentId, parentId) {
      this.buttonShow = false;
      this.$refs.guisubmitcomment.open();
      this.$refs.guisubmitcomment.setAt(""); // 设置 at 信息
      // 模拟设置默认值， 不需要请删除
      this.$refs.guisubmitcomment.setContent(""); // 设置 at 信息

      this.$refs.guisubmitcomment.setData({
        ...this.note,
        parentId: parentId,
        topParentId: topParentId,
      }); // 设置 at 信息
    },
    // 关闭窗口
    close: function () {
      // 展示底部按钮
      this.buttonShow = true;
    },
    submit: function (e) {
      console.log(e);
      if (uni.app.isEmpty(e.content)) {
        uni.app.msg("请输入评论内容~");
        return;
      }
      const replyData = {
        noteId: e.noteId,
        authorId: uni.getStorageSync("userId"),
        replayContent: e.content,
      };
      if (!uni.app.isEmpty(e.topParentId)) {
        replyData.topParentId = e.topParentId;
      }
      if (!uni.app.isEmpty(e.parentId)) {
        replyData.parentId = e.parentId;
      }
      uni.app.post("/blog/action/replyNote", replyData, "json", "", (res) => {
        console.log(res);
        this.getNoteReply(e.noteId);
      });
    },
    openPayPopup(item) {
      console.log(item);
      this.orderItem = item;
      this.isPayPopupVisible = true;
    },
    closePayPopup() {
      this.isPayPopupVisible = false;
    },
    onPayMethodConfirm(method) {
      this.selectedPayMethod = method.value;
      this.isPayPopupVisible = false;
      uni.app.post(
        "/blog/order/consumptionPay",
        {
          userId: uni.getStorageSync("userId"),
          noteId: this.noteId,
          payWay: this.selectedPayMethod,
          id: this.orderItem.id,
          tradeNumber: 1,
        },
        "",
        "",
        (res) => {
          if (res.code == 2000) {
            // 支付成功逻辑
          }
        },
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.fx {
  position: fixed;
  bottom: 20%;
  left: 20%;
  line-height: 60rpx;
  background: red;
  color: #fff;
  text-align: center;
  border-radius: 100rpx;
  width: 60%;
  z-index: 200;
}
.list {
  background: #fff;
  width: 600rpx;
  height: 600rpx;

  border-radius: 20rpx;

  .list-msg {
    line-height: 80rpx;
    border-bottom: 2rpx solid #f5f5f5;
    padding: 0 20rpx;
  }

  .tit {
    text-align: center;
    line-height: 100rpx;
  }
}

page {
  background-color: #f8f8f8;
  height: 100vh;
}

/* 报名成功遮罩层 */
.success-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;

  .success-popup {
    width: 480rpx;
    height: 72rpx;
    background-color: #ffffff;
    border-radius: 50rpx;
    text-align: center;
    line-height: 72rpx;
  }
}

.customNavBar {
  // position: sticky;
  // top: 0;
  position: fixed;
  top: 0%;
  left: 0;
  width: 100vw;
  height: 120rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 1000;

  .leftBackHeader {
    display: flex;
    align-items: center;

    .backImg {
      width: 48rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }

      // margin-right: 16rpx;
    }

    .infoBox {
      display: flex;
      align-items: center;

      image {
        width: 64rpx;
        height: 64rpx;
        margin-right: 16rpx;
        border-radius: 50%;
      }

      text {
        font-weight: bold;
        font-size: 28rpx;
        color: #303030;
      }
    }
  }

  .rightShare {
    display: flex;
    align-items: center;

    .shareImg {
      width: 48rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .guanzhuBox {
      width: 180rpx;
      height: 48rpx;
      background: #d9f700;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
      line-height: 48rpx;
      text-align: center;
      margin-right: 16rpx;
    }

    .actguanzhuBox {
      width: 180rpx;
      height: 48rpx;
      background: #f6f6f6;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
      line-height: 48rpx;
      text-align: center;
      margin-right: 16rpx;
    }
  }
}

.operationBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: #ffffff;
  padding: 16rpx;
  box-sizing: border-box;

  .leftBtn {
    display: flex;

    .dis {
      display: flex;
      flex-direction: column;
      align-items: center;
      // align-items: center;
      margin-right: 48rpx;

      image {
        width: 56rpx;
        height: 56rpx;
      }

      text {
        font-weight: bold;
        font-size: 24rpx;
        color: #7f7f7f;
      }
    }
  }

  .rightBtn image {
    width: 250rpx;
    height: 56rpx;
  }
}

.mainBox {
  // height: calc(100vh - 284rpx);
  // overflow-y: auto;
  padding-top: 120rpx;
  // padding-bottom: 164rpx;
}

.bodyBox {
  background-color: #ffffff;
}

.operationImg {
  padding: 0 28rpx;

  .swiper-container {
    // position: relative;
    width: 100%;

    .swiper {
      width: 100%;
      transition: height 0.3s ease;

      .swiper-item-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .swiper-image {
          width: 100%;
          max-height: 100%;
        }
      }
    }
  }

  .indicator-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rpx;

    .indicator {
      width: 8rpx;
      height: 8rpx;

      .indicator-image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.operationText {
  padding: 0 28rpx;
  margin-top: 50rpx;
  padding-bottom: 64rpx;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #303030;
    margin-bottom: 16rpx;
  }

  .text {
    font-weight: 400;
    font-size: 28rpx;
    color: #303030;
  }

  .rewardImg {
    margin: 48rpx auto 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 112rpx;
      height: 112rpx;
    }

    .rewardText {
      margin-top: 16rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #303030;
    }
  }

  .tagListBox {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-top: 40rpx;

    .tagItem {
      font-weight: 400;
      font-size: 28rpx;
      color: #c69c6d;
    }
  }

  .searchBox {
    margin-top: 32rpx;
    width: 674rpx;
    background: #f6f6f6;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    padding: 0 14rpx;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }

    input {
      width: 100%;
      height: 60rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #303030;
      line-height: 30rpx;
    }
  }

  .Tips {
    margin-top: 32rpx;
    // margin-bottom: 64rpx;
    font-weight: 500;
    font-size: 20rpx;
    color: #7f7f7f;
  }
}

.commentBox {
  margin-top: 16rpx;
  background-color: #ffffff;
  padding: 28rpx 32rpx;
  padding-bottom: 180rpx;

  .comTitle {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    margin-left: 12rpx;
  }

  .comLine {
    width: 100%;
    height: 0rpx;
    border: 2rpx solid #dbdbdb;
    opacity: 0.4;
    margin-top: 16rpx;
  }

  .commentListBox {
    .ComUserInfo {
      display: flex;
      margin-top: 32rpx;

      .headImg {
        width: 64rpx;
        height: 64rpx;
        margin-right: 16rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .zanBox {
        display: flex;
        flex-direction: column;

        image {
          width: 44rpx;
          height: 44rpx;
        }

        text {
          font-weight: 500;
          font-size: 20rpx;
          color: #7f7f7f;
        }
      }

      .ComNameText {
        flex: 1;

        .ComName {
          display: flex;
          align-items: center;

          .name {
            font-weight: 400;
            font-size: 28rpx;
            color: #7f7f7f;
            margin-right: 16rpx;
          }

          .isauthorBtn {
            width: 64rpx;
            height: 26rpx;
            background: #c69c6d;
            border-radius: 30rpx 30rpx 30rpx 30rpx;
            font-weight: 500;
            font-size: 20rpx;
            color: #f9f9f9;
            line-height: 26rpx;
            text-align: center;
          }
        }

        .ComText {
          font-weight: 400;
          font-size: 28rpx;
          color: #303030;
          line-height: 46rpx;
        }

        .ComTime {
          // margin-top: 16rpx;

          .time {
            font-weight: 500;
            font-size: 20rpx;
            color: #7f7f7f;
            margin-right: 32rpx;
          }

          .address {
            font-weight: 500;
            font-size: 20rpx;
            color: #303030;
          }

          .huifu {
            font-weight: 500;
            font-size: 20rpx;
            color: #303030;
          }
        }
      }
    }

    .replyComment {
      width: 80%;
      background: #f8f8f8;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-left: 80rpx;
      padding: 32rpx 16rpx 16rpx;
      margin-top: 16rpx;

      .replyCommentItem {
        display: flex;
        // align-items: flex-start;
        margin-bottom: 38rpx;

        .replyHeadImg {
          width: 48rpx;
          height: 48rpx;
          margin-right: 11rpx;

          image {
            width: 48rpx;
            height: 48rpx;
          }
        }

        .replyInfoBox {
          .replyName {
            font-weight: 400;
            font-size: 28rpx;
            color: #7f7f7f;
          }

          .replyText {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .repltContent {
              font-weight: 400;
              font-size: 28rpx;
              color: #303030;
              margin-right: 16rpx;
            }

            .replyTime {
              font-weight: 500;
              font-size: 20rpx;
              color: #7f7f7f;
              margin-right: 16rpx;
            }

            .replyHuifu {
              font-weight: 500;
              font-size: 20rpx;
              color: #303030;
            }
          }
        }
      }
    }

    .replyLine {
      width: 100%;
      height: 0rpx;
      border: 2rpx solid #f1f1f1;
    }

    .replyNum {
      font-weight: 500;
      font-size: 20rpx;
      color: #000000;
      margin: 16rpx auto;
      text-align: center;
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.popup {
  position: fixed;
  left: 0;
  bottom: 0;
  /* 固定在页面底部 */
  width: 100%;
  height: 600rpx;
  /* 弹窗高度 */
  background-color: #fff;
  z-index: 1001;
  border-radius: 24rpx 24rpx 0rpx 0rpx;

  .popup-content {
    padding: 14px 28rpx;

    .popupTop {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .popupBtn {
        margin: 0 auto;
        width: 96rpx;
        height: 8rpx;
        background: #f2f2f2;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }

      .popupText {
        margin: 32rpx auto;
        font-weight: bold;
        font-size: 30rpx;
        color: #303030;
        text-align: center;
      }
    }

    .popupContent {
      display: flex;

      .popupContentItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 32rpx;

        image {
          width: 210rpx;
          height: 210rpx;
        }

        text {
          margin-top: 16rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #303030;
        }
      }
    }
  }
}

.popup-pay {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 1002;
  padding: 40rpx 32rpx 32rpx 32rpx;
  box-sizing: border-box;

  .popup-pay-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303030;
    text-align: center;
    margin-bottom: 40rpx;
  }

  .popup-pay-list {
    .popup-pay-item {
      display: flex;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f1f1f1;
      cursor: pointer;

      &.active {
        background: #f6faff;
      }

      .popup-pay-icon {
        width: 56rpx;
        height: 56rpx;
        margin-right: 24rpx;
      }

      .popup-pay-name {
        flex: 1;
        font-size: 28rpx;
        color: #303030;
      }

      .popup-pay-radio {
        width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .radio-checked {
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
          background: #d9f700;
          border: 4rpx solid #d9f700;
        }

        .radio-unchecked {
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
          border: 4rpx solid #e0e0e0;
        }
      }
    }
  }

  .popup-pay-btns {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;

    .popup-pay-cancel,
    .popup-pay-confirm {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      padding: 20rpx 0;
      border-radius: 16rpx;
      margin: 0 8rpx;
    }

    .popup-pay-cancel {
      background: #f6f6f6;
      color: #7f7f7f;
    }

    .popup-pay-confirm {
      background: #d9f700;
      color: #303030;
      font-weight: bold;
    }
  }
}
</style>
